<script setup lang='ts'>
import { reactive, computed, onMounted, onUnmounted, ref, type ComputedRef } from 'vue';
import { useInfoStore } from "../../store/modules/info.js";
import ws from "../../utils/websocket.js";
defineOptions({
    name: ''
})

const emit = defineEmits(['changeCallStatus'])

const props = defineProps<{
    deviceStatus: number, //-1离线, 0空闲，1通话中 2呼出/入中 3拨号中 4结束
}>()

let deviceStatus: ComputedRef<number> = computed(() => {
    return props.deviceStatus
})

let timer = null;
onMounted(() => {
    // console.log('onMountedonMountedonMountedonMountedonMounted');
    // if(useInfoStore().isTime){

    // }
    timer = setInterval(() => {
        if (useInfoStore().deviceUseStatus === '3') {
            state.time++
            state.callTime = formatSeconds(state.time)
        }
    }, 1000)
})


onUnmounted(() => {
    state.time = 0
    state.callTime = 0
    clearInterval(timer)
})
// timer = setInterval(() => {
//     if (useInfoStore().deviceUseStatus === '3') {
//         state.time++
//         state.callTime = formatSeconds(state.time)
//     }
// }, 1000)
const state = reactive<any>({
    value1: 10,
    value2: 10,
    isCloseRecord: false,//关闭录音,
    disableRecord: false,//禁用关闭录音
    isMicrophone: false,//关闭麦克风
    dialogVisible: false,//关闭录音dialog
    sureCloseRecordLoading: false,
    // callProgress: 0,//0通话中,1拨号中,-1结束
    callDoneDialogVisible: false,//通话结束弹窗
    backTime: 10,//通话结束退出时间,
    time: 0, //计时
    callTime: 0,
    callDoneLoading: false,
    callDoneIcon: true,
})

// 关闭录音
const closeRecord = () => {
    if (state.disableRecord) return;
    state.dialogVisible = true
}
const closeDialog = () => {
    state.dialogVisible = false
}
const sureCloseRecord = () => {
    //调接口成功=>关闭
    state.sureCloseRecordLoading = true;

    setTimeout(() => {
        state.sureCloseRecordLoading = false;
        state.dialogVisible = false
        state.isCloseRecord = true
        state.disableRecord = true
    }, 1500);
}

// 关闭麦克风
const closeMicrophone = () => {
    state.isMicrophone = !state.isMicrophone
    let rag = ''
    if (state.isMicrophone) {
        rag = `mic,1`
    } else {
        rag = `mic,-1`
    }
    ws.websocketsend('rag')


}

// 挂断
const callDone = () => {
    state.callDoneLoading = true;
    state.callDoneIcon = false
    clearInterval(timer)
    state.callTime = 0
    state.time = 0
    setTimeout(() => {
        ws.websocketsend('hangup')
        emit('changeCallStatus')
        state.callDoneLoading = false;
        state.callDoneIcon = true

        // clearInterval(timer)
    }, 1500);

}

// 直接点击返回
// const back = () => {
//     state.callDoneDialogVisible = false;
//     clearInterval(timer)
//     state.backTime = 10
//     emit('changeCallStatus')
// }

// 接听来电
const startCall = () => {
    setTimeout(() => {
        ws.websocketsend('answer')
        state.callDoneLoading = false;

    }, 1000);
}

function formatSeconds(seconds) {
    let hours: string | number = Math.floor(seconds / 3600);
    let minutes: string | number = Math.floor((seconds - (hours * 3600)) / 60);
    let secs: string | number = seconds - (hours * 3600) - (minutes * 60);

    // 添加前导零
    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    secs = secs < 10 ? "0" + secs : secs;

    var formattedTime = hours + ":" + minutes + ":" + secs;
    return formattedTime;
}
</script>

<template>
    <div class="out">
        <div class="out-avatar">
            <img src="../../assets/avatar@2x.png" alt="">
        </div>
        <!-- <div class="base"></div> -->
        <div class="out-body">
            <div class="call-loading"
                v-if="useInfoStore().deviceUseStatus === '1' || useInfoStore().deviceUseStatus === '2'">
                <div class="call-title">连接中</div>
                <div class="call-phone">{{ useInfoStore().nowCall }}</div>
            </div>
            <div class="call-progress" v-if="useInfoStore().deviceUseStatus === '3'">
                <div class="call-title">通话中</div>
                <div class="call-phone" v-if="useInfoStore().phoneName">{{ useInfoStore().phoneName }}</div>
                <div class="call-time" v-else>{{ useInfoStore().nowCall }}</div>
                <div class="call-time">{{ state.callTime || '' }}</div>
                <!-- <div class="call-time">{{ useInfoStore().time ||0  }}</div> -->
              
            </div>
            <div class="out-body-ctrl">
                <div class="ctrl">
                    <div class="ctrl-item">
                        <div @click="closeRecord" class="ctrl-item-icon dantupailie no_drag"
                            :class="state.isCloseRecord ? 'close-record-wrap' : ''">
                            <i class="iconfont icon-dantupailie"></i>
                        </div>
                        <div class="ctrl-item-title">录音</div>
                    </div>
                    <div class="ctrl-item">
                        <div class="ctrl-item-icon no_drag"
                            :class="state.isMicrophone ? 'close-microphone' : 'open-microphone'" @click="closeMicrophone">
                            <i class="iconfont icon-maikefeng"></i>
                        </div>
                        <div class="ctrl-item-title">麦克风</div>
                    </div>
                    <div class="ctrl-item">
                        <div class="ctrl-item-icon">
                            <i class="iconfont icon-wendang" style="color:#CFD7E0;font-size: 12px;"></i>
                        </div>
                        <div class="ctrl-item-title">实时</div>
                    </div>
                </div>
            </div>
            <el-button v-if="useInfoStore().deviceUseStatus === '3' || useInfoStore().deviceUseStatus === '1'"
                class="home-center-call no_drag" :loading="state.callDoneLoading" @click="callDone">
                <img v-if="state.callDoneIcon" src="../../assets/endCall@2x.png" alt="">
            </el-button>
            <div class="home-center-call-in-wrap" v-else>
                <el-button class=" end-call-btn no_drag" :loading="state.callDoneLoading" @click="callDone"><img
                        v-if="state.callDoneIcon" src="../../assets/endCall@2x.png" alt=""></el-button>
                <el-button class="home-center-call-in-btn  no_drag" @click="startCall">
                    <img src="../../assets/startCall@2x.png" alt="">
                </el-button>
            </div>
            <!-- <el-divider /> -->
            <div class="divider"></div>
            <div class="home-center-ctrl">
                <div>
                    <img src="../../assets/earphone@2x.png" alt="">
                    <el-slider :min="0" :max="10" class="slider-style" v-model="state.value1" />
                </div>
                <div><img src="../../assets/microphone@2x.png" alt=""><el-slider :min="0" :max="10"
                        v-model="state.value2" /></div>
            </div>
        </div>
        <el-dialog custom-class="dialog-style" :close-on-click-modal="false" v-model="state.dialogVisible" title="提示"
            width="269px" :before-close="closeDialog">
            <span class="dialog-content">当次通话只能操作一次录音关闭，请再次确认</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button class="btn-style no_drag" @click="closeDialog">取消</el-button>
                    <el-button class="btn-style no_drag" :loading="state.sureCloseRecordLoading" type="primary"
                        @click="sureCloseRecord">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog custom-class="call-done-dialog" :close-on-click-modal="false" :show-close="false"
            v-model="state.callDoneDialogVisible" width="269px">
            <div class="call-done-dialog-body">
                <img src="../../assets/callDone@2x.png" alt="">
                <span>通话已结束</span>
            </div>
            <div class="call-done-dialog-footer">
                <span @click="back"> 返回 ( {{ state.backTime }} S)</span>
            </div>
        </el-dialog>
    </div>
</template>

<style lang='scss' scoped>
.out {
    height: 327px;
    width: 328px;
    position: relative;

    .out-avatar {
        width: 66px;
        height: 66px;
        // border-radius: 50%;
        // background-color: pink;
        // transform: scale(0.5);
        // background-color: #3B000000;
        // background: linear-gradient(180deg, #F4F9FD 0%, #EFF4FA 100%);
        // box-shadow: 0px 10px 13px 2px rgba(113, 125, 144, 0.09);
        //  filter: blur(2px);
        margin: 0 auto;
        // background: #000;
        z-index: 10;
        position: absolute;
        left: 122px;
        top: -40px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 66px;
            height: 66px;
            transform: scale(1.5);
        }

    }

    .out-body {
        width: 338px;
        height: 335px;
        // background: linear-gradient(180deg, #F4F9FD 0%, #EFF4FA 100%);
        // box-shadow: 0px 0px 3px 1px red;
        // backdrop-filter: blur(5px);
        //filter: contrast(20);
        margin-top: 65px;
        display: flex;
        align-items: center;
        flex-direction: column;
        background: url('../../assets/cardBg.png');
        background-size: 100% 100%;
        margin-left: -14px;
        // background: pink;

        .call-loading {
            display: flex;
            align-items: center;
            flex-direction: column;
            margin-top: 40px;

            .call-title {
                font-size: 12px;
                font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
                font-weight: 400;
                color: #414D59;
            }

            .call-phone {
                font-size: 16px;
                font-family: AlibabaPuHuiTiM;
                color: #414D59;
            }
        }

        .call-progress {
            display: flex;
            align-items: center;
            flex-direction: column;
            margin-top: 30px;
            margin-bottom: -12px;

            .call-title {
                font-size: 12px;
                font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
                font-weight: 400;
                color: #414D59;
            }

            .call-phone {
                font-size: 16px;
                font-family: AlibabaPuHuiTiM;
                color: #414D59;
            }

            .call-time {
                height: 20px;
                font-size: 12px;
                font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
                font-weight: 400;
                color: #929FAD;
            }

        }

        .out-body-ctrl {
            width: 220px;
            margin-top: 17px;

            .ctrl {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .ctrl-item {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    cursor: pointer;

                    .ctrl-item-icon {
                        box-shadow: 0px 10px 13px 2px rgba(113, 125, 144, 0.09);
                        margin-bottom: 5px;
                        width: 30px;
                        height: 30px;
                        text-align: center;
                        line-height: 30px;
                        border: 1px solid #6BA0FB;
                        border-radius: 50%;
                    }


                    .ctrl-item-title {
                        font-size: 12px;
                        font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
                        font-weight: 400;
                        color: #929FAD;
                    }

                    .dantupailie {
                        border: 1px solid #0FC056;
                        line-height: 30px;
                        color: #0FC056;
                        font-size: 12px;
                    }

                    .close-record-wrap {
                        border: 1px solid #CFD7E0;
                        color: #CFD7E0;
                        cursor: not-allowed;
                    }



                    .open-microphone {
                        border: 1px solid #6BA0FB;
                        color: #6BA0FB;
                        font-size: 20px;
                    }

                    .close-microphone {
                        border: 1px solid #CFD7E0;
                        color: #CFD7E0;
                    }
                }

                .ctrl-item:nth-last-child(1) {
                    .ctrl-item-icon {
                        border: 1px solid #CFD7E0;
                        color: #CFD7E0;
                        cursor: not-allowed;
                    }
                }
            }

        }

        .home-center-call {
            display: block;
            width: 232px;
            height: 40px;
            line-height: 35px;
            border-radius: 20px;
            margin: 0 auto;
            text-align: center;
            background: linear-gradient(180deg, #FF5757 0%, #BB1919 100%);
            box-shadow: 0px 7px 17px 0px rgba(246, 78, 78, 0.49);
            margin-top: 17px;
            border: 1px solid #bb1919c6;

            img {
                width: 29px;
                height: 18px;
            }
        }

        .home-center-call-in-wrap {
            width: 270px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;

            .home-center-call-in-btn {

                background: linear-gradient(180deg, #0FC056 0%, #0EAB4D 100%);
                box-shadow: 0px 7px 17px 0px rgba(14, 186, 83, 0.35);
                width: 125px;
                height: 40px;
                border-radius: 20px;

                img {
                    width: 30px;
                    height: 30px;
                    margin-top: 5px;
                    transform: rotate(-10deg);

                }

            }

            .end-call-btn {
                width: 125px;
                height: 40px;
                border-radius: 20px;
                background: linear-gradient(180deg, #FF5757 0%, #BB1919 100%);
                box-shadow: 0px 7px 17px 0px rgba(246, 78, 78, 0.49);
                border: 1px solid #BB1919;

                img {
                    width: 50px;
                    margin-top: 8px;
                    transform: scale(0.8);
                }
            }
        }

        .divider {
            height: 1px;
            width: 85%;
            background-color: #8795A426;
            margin: 24px 24px 8px 24px;
        }

        .home-center-ctrl {
            width: 50%;
            height: 40px;
            margin: 0px auto;

            div {
                display: flex;
                align-items: center;

                img {
                    width: 22px;
                    height: 22px;
                    margin-top: 4px;
                    margin-right: 8px;
                }
            }


            :deep(.el-slider__bar) {
                background-color: #0FC056;
            }

            :deep(.el-slider__button-wrapper) {
                transform: translateX(-50%) scale(0.5);
            }
        }
    }

    :deep(.dialog-style) {
        width: 269px;
        height: 171px;
        background: linear-gradient(180deg, #F4F9FD 0%, #EFF4FA 100%);
        box-shadow: 0px 10px 13px 2px rgba(113, 125, 144, 0.09);
        border-radius: 10px;
        backdrop-filter: blur(0px);

        .el-dialog__footer,
        .el-dialog__body {
            padding: 0px !important;
        }

        .el-dialog__body {
            padding: 20px 0px 0 30px !important;
        }

        .dialog-content {
            font-size: 10px;
        }

        .el-dialog__footer {
            width: 328px;
            display: flex;
            justify-content: space-evenly;
        }

        .btn-style {
            transform: scale(0.8);
            margin-top: 30px;
            margin-right: 65px;
            width: 80px;
        }
    }

    :deep(.el-dialog__title) {
        font-size: 14px !important;

        span {
            font-size: 12px;
        }
    }

    :deep(.call-done-dialog) {
        width: 269px;
        height: 171px;
        background: linear-gradient(180deg, #F4F9FD 0%, #EFF4FA 100%);
        box-shadow: 0px 10px 13px 2px rgba(113, 125, 144, 0.09);
        border-radius: 10px;
        backdrop-filter: blur(0px);
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        // 去除dialog 默认边距
        .el-dialog__header,
        .el-dialog__body {
            padding: 0 !important;
            margin-right: 0 !important;
        }

        .call-done-dialog-body {
            width: 269px;
            height: 125px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            img {
                // width: 43px;
                // height: 41px;
                transform: scale(0.5);
            }

            span {
                font-size: 12px;
                font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
                font-weight: 400;
                color: #8795A4;
                margin-top: -32px;
                margin-bottom: 10px;
                margin-left: -15px;
            }
        }

        .call-done-dialog-footer {
            height: 45px;
            width: 100%;
            text-align: center;
            line-height: 45px;
            color: #EB4444;
            font-size: 14px;
            font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
            font-weight: 400;

            span {
                cursor: pointer;
            }
        }
    }

}

/* 主窗口设置了 resizable: false 禁止改变主窗口尺寸，将不可拖动，故需加drag，让其可拖动； */
.ele_drag {
    -webkit-app-region: drag;
    /* 让元素可拖动，设置了drag的元素不可点击 */
}

.no_drag {
    -webkit-app-region: no-drag;
    /* 设置了drag的元素将不可点击，故设置no-drag，让元素可点击 */
}
</style>
